<template>
  <div class="system_integration_member">
    <c-title :hide="false" :text="diy_name" />
    <diyBackGround :minHeight="'9.13rem'">
      <div class="main">
        <div class="userImg" v-if="info.has_one_member">
          <img :src="info.has_one_member.avatar" alt="" />
        </div>
        <div class="main_r">
          <div class="name">{{ info.realname }}</div>
          <div class="deviceNo">设备编号:{{ info.device_no }}</div>
        </div>
      </div>
    </diyBackGround>
    <div class="detailBox">
      <div class="deviceDetail">
        <div class="detail">
          <div class="detail_top">{{ info.left ? info.left : 0 }}</div>
          <div class="detail_bottom">单次次数</div>
        </div>
        <div class="detail">
          <div class="detail_top">{{ info.expire_at ? info.expire_at + "到期" : 0 }}</div>
          <div class="detail_bottom">无限次次数</div>
        </div>
      </div>
      <div class="line_box">
        <van-cell-group :border="false">
          <van-cell :border="false" title="检测报告" @click="toReport" is-link title-style="text-align:left;margin-left:0.53rem;">
            <template #icon>
              <i class="iconfont icon-jiancebaogao"></i>
            </template>
          </van-cell>
          <van-cell :border="false" title="次数明细" @click="toDetail" is-link title-style="text-align:left;margin-left:0.53rem;">
            <template #icon>
              <i class="iconfont icon-cishumingxi"></i>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <div class="posBtn set-pc-style">
      <div class="btn" @click="scanTap">扫一扫</div>
    </div>
    <BarScan v-model="openScan" v-if="openScan" :show="openScan" ref="qrcode" @ok="getResult" @err="geterror"></BarScan>
  </div>
</template>
<script>
import diyBackGround from "../../components/diyBackGround";
import BarScan from "./components/BarScan.vue";
export default {
  data() {
    return {
      openScan: false,
      resTxt: "",
      info: [],
      diy_name:""
    };
  },
  components: { diyBackGround, BarScan },
  activated() {
    this.getData();
  },
  methods: {
    scanTap() {
      this.resTxt = "";
      this.openScan = true;
    },
    getKey(url, name) {
      let _i = decodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(url) || [, ""])[1].replace(/\+/g, "%20")) || null;
      if (name == "i") {
        return String(_i).replace(/[^0-9]/gi, ""); //过滤i非数字
      } else {
        return _i;
      }
    },
    getResult(result) {
      // this.result = result;
      // this.$refs.qrcode.stop();
      this.openScan = false;
      let dayNow = new Date().getTime();
      let sn = this.getKey(result, "sn");
      if (!sn) return this.$toast("设备号错误");
      if (this.info.device_no != sn) return this.$toast("请扫已绑定设备");
      if (this.info.left > 0 || dayNow < new Date(this.info.expire_at).getTime()) {
        // 剩余天数大于0或者未过期
        this.$router.push(this.fun.getUrl("system_integration_verify", { sn: sn }));
      }
    },
    geterror(e) {
      if (e) {
        this.$toast(e);
      }
      this.openScan = false;
      // this.$refs.qrcode.stop();
    },
    toDetail() {
      this.$router.push(this.fun.getUrl("system_integration_Frequencydetail", {}));
    },
    toReport() {
      this.$router.push(this.fun.getUrl("system_integration_report", {}));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.body-health-check.api.relate-member.index", {}, "");
      if (result) {
        this.info = data.member_info;
        this.diy_name = data.diy_name;
        this.fun.setWXTitle(data.diy_name);
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.detailBox {
  margin: 0 0.75rem;
  margin-top: -3.6rem;
  .line_box {
    margin-top: 0.63rem;
    background: #ffffff;
    border-radius: 0.5rem;
    .icon-jiancebaogao,.icon-cishumingxi{
      font-size: 1.2rem;
    }
  }
  .deviceDetail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 1.16rem 0;
    box-sizing: border-box;
    border-radius: 0.5rem;
    .detail {
      flex: 1;
      .detail_bottom {
        font-size: 0.75rem;
        color: #6e6e79;
      }
      .detail_top {
        font-weight: bold;
        font-size: 0.81rem;
        color: #00001c;
        margin-bottom: 0.5rem;
      }
    }
  }
}
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.44rem 1.03rem;
  box-sizing: border-box;
  .main_r {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .deviceNo {
      margin-top: 0.38rem;
      height: 1.31rem;
      line-height: 1.31rem;
      background: rgba($color: #ffffff, $alpha: 0.3);
      border-radius: 0.94rem;
      padding: 0 0.69rem;
      font-weight: 400;
      font-size: 0.75rem;
      color: #ffffff;
      box-sizing: border-box;
    }
  }
  .userImg {
    width: 3.19rem;
    height: 3.19rem;
    border: 0.06rem solid #ffffff;
    margin-right: 0.53rem;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .name {
    text-align: left;
    font-weight: bold;
    font-size: 1.13rem;
    color: #ffffff;
  }
}
.posBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3.75rem;
  background: #ffffff;
  width: 100%;
  box-shadow: 0rem -0.03rem 0.31rem 0.03rem #f5f5f5;
  overflow: hidden;
  .btn {
    background: #f15353;
    border-radius: 1.28rem;
    padding: 0.75rem 0;
    box-sizing: border-box;
    margin: 0 0.75rem;
    border-radius: 1.28rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
    margin-top: 0.63rem;
  }
}
</style>
